<template>
	<view class="order-shop">
		<view class="order-goods">
			<order-goods :list="item.goods"></order-goods>
		</view>
		<view class="item flex" v-if="item.goods[0].delivery_type=='1'">
			<view>配送方式</view>
			<view class="flex-1 m-l-20 muted">
			</view>
			<!-- TODO -->
			<view>
				快递配送
			</view>
		</view>
		<view class="item flex" v-else-if="item.goods[0].delivery_type=='3'">
			<view>取货时间</view>
			<view class="flex-1 m-l-20 muted">
			</view>
			<!-- TODO -->
			<view>
				8:30-19:00
			</view>
		</view>
<!-- 		<view class="item flex" v-if="item.goods[0].delivery_type=='1'">
			<view>发货门店</view>
			<view class="flex-1 m-l-20 muted">
			</view>
			<view>
				{{item.shop_name}}
			</view>
		</view> -->
		<view class="item flex" v-if="addressId">
			<view>运费</view>
			<view class="flex-1 m-l-20 muted">
			</view>
			<view v-if="item.shipping_price > 0">
				<price-format weight="700" :price="item.shipping_price"></price-format>
			</view>
			<view v-else>免运费</view>
		</view>
		<view class="item flex row-between">
			<view>订单备注</view>
			<u-input v-model="remark" class="flex-1 m-l-20" :clearable="false" placeholder="请输入备注信息"
				inputAlign="right"></u-input>
		</view>

		<u-popup v-if="orderType == 0" v-model="showCoupon" border-radius="14" mode="bottom" closeable
			:safe-area-inset-bottom="true">
			<view class="p-30">
				<view class="title">优惠券</view>
			</view>
			<view v-if="showCoupon">
				<tabs :current="active" :bar-width="100" :is-scroll="false">
					<tab :name="'可使用优惠券 (' + usableCoupon.length + ')'">
						<coupon-order :list="usableCoupon" :type="0" @change="onSelectCoupon" :coupon-id="couponId">
						</coupon-order>
					</tab>
					<tab :name="'不可用优惠券 (' + unusableCoupon.length + ')'">
						<coupon-order :list="unusableCoupon" :type="1" @change="showCoupon = false"></coupon-order>
					</tab>
				</tabs>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getOrderCoupon
	} from "@/api/activity";
	import {
		invoiceType
	} from "@/utils/type.js";
	export default {
		name: "order-shop",
		props: {
			item: {
				type: [Object, Array],
			},
			teamId: {
				type: [Number, undefined],
			},
			addressId: {
				type: [Number, undefined],
			},
			bargainLaunchId: {
				type: [Number, undefined],
			},
			orderType: {
				type: Number,
			},
			invoice: {
				type: [Object, Array],
			},
		},
		data() {
			return {
				active: 0,
				remark: "",
				showCoupon: false,
				showDelivery: false,
				usableCoupon: [],
				unusableCoupon: [],
				usableCouponL: 0,
				unusableCouponL: 0,
				isRequest: false,
				couponId: "",
				invoiceInfo: {}, // 发票内容
			};
		},
		computed: {
			// 获取当前发票选择显示在视图上
			getCurrentShopInvoice() {
				const invoice = this.invoiceInfo;
				if (invoice.name) {
					return `${invoice.type == 0 ? "普通发票" : "专用发票"} - ${
          invoice.header_type == 0 ? "个人" : "企业"
        } - ${invoice.name}`;
				} else {
					return "不开发票";
				}
			},
		},
		methods: {
			onShowCoupon() {
				if (!this.isRequest) {
					uni.showLoading({
						title: "加载中...",
					});
					this.getCoupon();
				} else {
					this.showCoupon = true;
				}
			},
			async getCoupon() {
				const {
					item: {
						goods,
						shop_id
					},
				} = this;
				const params = goods.map(({
					item_id,
					num,
					goods_id
				}) => ({
					item_id,
					num,
					goods_id,
				}));
				const {
					data,
					code
				} = await getOrderCoupon({
					goods: params,
					shop_id: shop_id,
				});
				if (code == 1) {
					this.isRequest = true;
					this.usableCoupon = data.suit;
					this.usableCouponL = data.suit.length;
					this.unusableCoupon = data.un_suit;
					this.unusableCouponL = data.un_suit.length;
					this.showCoupon = true;
					uni.hideLoading();
				}
			},
			chengeDelivery() {
				this.showDelivery = true;
			},
			// 选择发票
			handleInvoice(shopId) {
				this.$Router.push({
					path: "/bundle/pages/invoice/invoice",
					query: {
						shop_id: shopId,
						invoice: JSON.stringify(this.invoiceInfo),
						type: invoiceType["SETTLEMENT"],
					},
				});
			},
			onSelectCoupon(e) {
				this.couponId = e;
				this.$emit("changecoupon", e);
				this.showCoupon = false;
			},
		},
		watch: {
			remark(val) {
				this.$emit("changeremark", {
					shop_id: this.item.shop_id,
					remark: val,
				});
			},
			invoice(val) {
				const res = val.filter((el) => el.shop_id == this.item.shop_id);
				if (res.length) {
					this.invoiceInfo = res[0];
				} else {
					this.invoiceInfo = {};
				}
			},
		},
	};
</script>

<style lang="scss">
	.order-shop {
		.order-goods {
			border-top: $-solid-border;
		}

		.item {
			height: 60rpx;
			padding: 0 24rpx;
			font-weight: bold;

			.invoice {
				display: flex;

				&--text {
					width: 300rpx;
					text-align: right;
				}
			}
		}

		.total-price {
			display: flex;
			padding: 30rpx 24rpx;
			font-size: 25rpx;
			font-weight: bold;
		}
	}

	.delivery {
		&-item {
			padding: 24rpx 14rpx;
			margin: 0 40rpx 30rpx;
			border-radius: 10rpx;
		}
	}
</style>